<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item to="/home/spumanage/spuaccount"
        >商品管理</el-breadcrumb-item
      >
      <el-breadcrumb-item>新增商品</el-breadcrumb-item>
      <el-breadcrumb-item>选择类目</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>
    <el-steps :active="0" simple style="margin-top: 20px">
      <el-step title="类目选择" icon="el-icon-files"></el-step>
      <el-step title="添加属性" icon="el-icon-s-operation"></el-step>
      <el-step title="添加图片" icon="el-icon-picture-outline"></el-step>
      <el-step title="添加详情" icon="el-icon-notebook-2"></el-step>
    </el-steps>

    <div class="box">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        点击选择类目：
        <br />
        <el-cascader-panel
          style="margin-top: 15px"
          ref="cascader"
          filterable
          placeholder="试试 搜索关键字"
          :props="props"
          v-model="ruleForm.parentId"
        >
        </el-cascader-panel>

        <div class="divider"></div>

        <el-button type="primary" @click="submitForm('ruleForm')"
          >下一步，添加商品属性</el-button
        >
      </el-form>
    </div>
  </div>
</template>
<script>
import LocalStorage from "@/common/StorageUtils.js";
export default {
  data() {
    return {
      ruleForm: {
        parentId: [0], //默认父类别为根类别
      },
      rules: {
        parentId: [
          { required: true, message: "必须选择商品类别", trigger: "blur" },
        ],
      },
      props: {
        lazy: true, // 懒加载
        emitPath: false, // 设置 false，只返回该节点的值
        lazyLoad: (node, resolve) => {
          /** 定义懒加载方式 */
          console.log("选择的当前节点：", node);
          let parentId = 0;
          if (!node.root) {
            parentId = node.data.value;
          }
          this.categoryApi
            .queryByParent({ parentId: parentId })
            .then((res) => {
              console.log("加载子类别：", res);
              if (res.data.state == 200) {
                // 整理数据结构, 返回类别数组 [{label:'类别名', value:'类别id'}...]
                let nodes = [];
                res.data.data.forEach((item) => {
                  nodes.push({
                    label: item.name,
                    value: item.id,
                    leaf: item.parent != 1,
                  });
                });
                resolve(nodes);
              } else {
                this.$alert(res.data.message, "提示");
              }
            });
        },
      },
    };
  },

  /** 页面挂载完毕后执行 */
  mounted() {
    // 加载上一步的spu数据
    if (this.$cookie.get("token")===undefined){
      this.$alert("未登录请登录", '提示')
    }else {
    let form = LocalStorage.get(LocalStorage.KEY_ADD_SPU);
    if (form) {
      this.ruleForm = form;
    }
    }
  },

  methods: {
    /** 提交表单 
            在此设计完整商品表单数据格式，将信息缓存到window.sessionStorage中，继续下一步. 
            数据格式如下：
            { 
                categoryId:1,  
                categoryInfo: '父类别/子类别/孙子类别',
                .... 
            }
         */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 整理数据结构， 缓存到sessionStorage
          this.ruleForm.categoryId = this.ruleForm.parentId;
          // 缓存冗余字段：categoryName
          this.ruleForm.categoryName =
            this.$refs["cascader"].getCheckedNodes()[0].data.label;
          LocalStorage.save(LocalStorage.KEY_ADD_SPU, this.ruleForm);
          // 下一步
          this.$router.push("2");
        }
      });
    },
  },
};
</script>
